<template>
    <div id="Search">
        <nav-bar left-arrow left-text="返回" @click-left="router.replace('/home')" fixed>
            <template #title>
                <div class="search-box">
                    <van-icon name="search" color="#999" />
                    <input type="text" v-model.trim="searchText" placeholder="请输入搜索关键词" ref="searchInput" />
                    <van-icon name="clear" v-if="searchText" @click="clearBtnClick" color="rgba(0,0,0,.2)" />
                </div>
            </template>
        </nav-bar>
        <div class="historyBox" v-show="searchText.length === 0">
            <div class="history-title">
                <span>搜索历史</span>
                <van-icon name="delete" @click="store.commit('clearHistory')" color="#999" />
            </div>
            <div class="history-content">
                <div class="history-item" v-for="item in store.state.search.history" :key="item"
                    @click="router.push('/search/' + item)">{{ item }}</div>
            </div>
        </div>
        <div class="advice-list" v-show="searchText !== 0">
            <div class="advice-item" v-for="item in searchOptions" :key="item" v-html="item.html"
                @click="handleItemClick(item.text)" />
        </div>
    </div>
</template>

<script  setup>
import { NavBar, Icon as vanIcon, Toast } from 'vant'
import { onMounted, ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import { searchAdvice } from '@/api'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
onMounted(() => {
    searchInput.value.focus()
})

// 搜索框
const searchText = ref('')
const searchInput = ref(null)
const clearBtnClick = () => {
    searchText.value = ''
    searchInput.value.focus()
}

// 获取搜索建议
const throttleTimer = ref(null)
const searchOptions = ref([])
// 处理高亮关键词
const handleHighlight = (text) => {
    if (!text) return
    const reg = new RegExp(searchText.value, 'ig')
    return text.replace(reg, `<span class="highlight">${searchText.value}</span>`)
}
const handleInput = (val) => {
    clearTimeout(throttleTimer.value)
    if (val === '') {
        searchOptions.value = []
        return
    }
    throttleTimer.value = setTimeout(async () => {
        Toast.loading({
            message: '加载中...',
            forbidClick: true
        })
        const { data: { data: { options } } } = await searchAdvice(val)
        options.forEach(item => {
            searchOptions.value.push({ html: handleHighlight(item), text: item })
        })
        Toast.clear()
    }, 300)
}
watchEffect(() => {
    handleInput(searchText.value)
})

// 处理搜索结果
const handleItemClick = (val) => {
    store.commit('setHistory', val)
    router.push('/search/' + val)
}

</script>

<style lang='less'>
#Search {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 46px;
}

.search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    input {
        flex: 1;
        height: 100%;
        border: none;
        outline: none;
        font-size: 14px;
        color: #666;
        background: transparent;

        &::placeholder {
            color: #999;
            font-weight: 300;
        }
    }
}

.van-nav-bar__title {
    height: 100%;
    width: 100%;
    padding: 8px;
}

.historyBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;

    .history-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        font-size: 14px;
        color: #999;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .history-content {
        flex: 1;
        padding: 10px;

        .history-item {
            display: inline-block;
            padding: 8px;
            max-width: 138px;
            margin: 0 10px 10px 0;
            background-color: rgba(0, 0, 0, 0.08);
            font-size: 12px;
            border-radius: 10px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
}

.advice-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;

    .advice-item {
        padding: 10px;
        letter-spacing: 1px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        // 超出文本省略号显示
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        // 按下时的样式
        &:active {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .highlight {
            color: red;
        }
    }
}
</style>
